<template>
	<LoginTemplate :title="login == 'login' ? 'AIP' : t('login', 'AIP项目管理平台')"
		:callBack='submit' :titleStyle="{'margin-bottom':'12px'}">
		<a-form :model="formState" name="normal_login" class="login-form"
			 :rules='rules' ref="formRef" @submit="submit">
			 <a-form-item>
				 <span class='formTitle'>{{ t('login', '首次登陆请修改密码') }}</span>
			 </a-form-item>
			 <a-form-item has-feedback name="oldPassword">
			 	<a-input-password style="height: 40px;" v-model:value="formState.oldPassword" type="password" :placeholder="t('login', '请输入旧密码')"/>
			 </a-form-item>
			<a-form-item has-feedback name="newPassword">
				<a-input-password style="height: 40px;" v-model:value="formState.newPassword" type="password" autocomplete="off" :placeholder="t('login', '请输入新密码')" />
			</a-form-item>
			<a-form-item has-feedback name="verifyPassword">
				<a-input-password style="height: 40px;" v-model:value="formState.verifyPassword" type="password" autocomplete="off"
					:placeholder="t('login', '请再次输入新密码')" />
			</a-form-item>
			<a-form-item class='button-box'>
				<a-button style="height: 40px;min-width: 320px;" type="primary" html-type="submit" class="login-form-button" >
					{{ t('login', '修改密码') }}
				</a-button>
			</a-form-item>
		</a-form>
	</LoginTemplate>
</template>

<script setup>
	import {
		reactive,
		computed,
		watchEffect,
		ref
	} from 'vue';
	import LoginTemplate from './components/LoginTemplate.vue';
	import {
		message
	} from 'ant-design-vue';
	import {
		modifyPassword
	} from '@/request/login.js'
	import {
		useRouter,
		useRoute
	} from 'vue-router';
import { t } from '@/i18n';
	
	const formState = reactive({
		oldPassword: '',
		newPassword: '',
		verifyPassword: '',
	});
	
const router = useRouter();
const route = useRoute();
const formRef = ref(null)
let {login} =route.query
	//点击修改密码按钮
	async function submit() {
		let data = {}
		let res=await modifyPassword(formState)
		console.log('修改密码',res)
		if(res&&res.code==200){
			router.push({
				name: 'Success',
				query: {...route.query}
			})
		}else{
			message.error(res.data?res.data.message: t('login', '密码修改失败，请重试'));
		}
	}

	//两次密码校验
	const validatePass = async (_rule, value) => {
	  if (value === '') {
	    return Promise.reject(t('login','请输入密码'));
	  } else if (value.length < 6 || value.length > 16) {
	    return Promise.reject(t('login','密码长度必须在6-16位之间'));
	  }
		 // else if (!/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,16}$/.test(value)) {
	  //   return Promise.reject('密码必须包含数字和字母');
	  // }
		 else {
	    return Promise.resolve();
	  }
	};
	const validatePass2 = async (_rule, value) => {
	  if (value === '') {
	    return Promise.reject(t('login','请再次输入密码'));
	  } else if (value !== formState.newPassword) {
	    return Promise.reject(t('login','两次密码不匹配'));
	  }else if (value.length < 6 || value.length > 16) {
	    return Promise.reject(t('login','密码长度必须在6-16位之间'));
	  }
		 // else if (!/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,16}$/.test(value)) {
	  //   return Promise.reject('密码必须包含数字和字母');
	  // }
		 else {
	    return Promise.resolve();
	  }
	};
	const rules = {
		oldPassword: [{
			required: true,
			trigger: 'change',
			// message: '请输入旧密码',
		}],
		newPassword: [{
			required: true,
			validator: validatePass,
			trigger: 'change',
		}],
		verifyPassword: [{
			required: true,
			validator: validatePass2,
			trigger: 'change',
		}],
	};
</script>

<style lang="scss" scoped>
	@import '../../styles/public.scss';

	.login-form {
		margin-bottom: 10px;
    .formTitle{
			font-size:16px;
			color: #333;
		}
		.button-box {
			width: 100%;
			margin-top: 20px;

			.login-form-button {
				width: 100%;
			}
		}

		.accept {
			font-size: 13px;

		}
	}

	.ant-upload-select-picture-card i {
		font-size: 32px;
		color: #999;
	}

	.ant-upload-select-picture-card .ant-upload-text {
		margin-top: 8px;
		color: #666;
	}

	.ant-form-item {
		margin-bottom: 10px;
	}

	.ant-form-item:nth-last-child(1) {
		margin-bottom: 0px;
	}
</style>
